<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>级块性元素1</title>
        <style>
            section{
                width:100%;
            }
            aside{
                display: inline-block;
                width:20%;
                vertical-align: top;
                border:1px solid #ccc;
            }
            article{
                width:76%;
                display: inline-block;
                vertical-align: top;
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <header><h1>北朝民歌赏析</h1></header>
        <hr>
        <section>
            <aside>
                <ul>
                    <li><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                    <li><a href="#">菜单3</a></li>
                </ul>
            </aside>
            <article>
                <h1>敕勒川</h1>
                <p>刺勒川，阴山下。天似穹庐，笼盖四野。天苍苍，野茫茫，风吹草地见牛羊。</p>
            </article>
        </section>
        <hr>
        <footer>copyright&copy;fspt.net</footer>
    </body>
</html>